<template>
  <div class="goodsPage">
    <ul class="side">
      <li v-for="item in goods" :key="item.name">
        <a :href="'#' + item.name">{{ item.name }}</a>
      </li>
    </ul>
    <div class="right">
      <div v-for="item1 in goods" :key="item1.name">
        <p class="goodsBigName" :id="item1.name">
          {{ item1.name }}
        </p>
        <ul>
          <li v-for="item in item1.foods">
            <img :src="item.image" alt="">
            <div class="text">
              <p class="goodsName">{{ item.name }}</p>
              <p class="description" v-if="item.name !== ''">{{ item.description }}</p>
              <p class="haoping">
                <span>月售{{ item.sellCount }}</span>
                <span>好评率{{ item.rating }}%</span>
              </p>
              <p class="price">
                <span class="redPrice">￥{{ item.price }}</span>
                <del class="oldPrice" v-if="item.oldPrice !== ''">￥{{ item.oldPrice }}</del>
              </p>
            </div>
            <div class="btns">
              <span @click="reduceCount(item)" class="jian" v-show="item.count > 0">-</span>
              <span v-show="item.count > 0" class="count">{{ item.count }}</span>
              <span @click="addCount(item)" class="jia">+</span>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex';
export default {
  data() {
    return {

    };
  },
  created() {
    this.getGoods();
  },
  computed: {
    ...mapState(["goods", "sumPrice", "shopCarList"]),
    getPrice() {
      let sum = 0;
      this.shopCarList.forEach((item) => {
        sum += item.price * item.count;
      });
      return sum;
    }
  },
  methods: {
    ...mapActions(["getGoods"]),
    addCount(food) {
      if (!food.count) {
        food.count = 1;
      } else {
        food.count++;
      }
      this.$store.commit("setShopCarList", {
        item: food,
      })
    },
    reduceCount(food) {
      food.count--;
    },
    isShowShopCar() {
      this.$store.commit("shopCarIsShow");
    }
  },
  components: {
  }
}
</script>

<style scoped>
.goodsPage {
  display: flex;
  height: 92%;
  overflow: hidden;
}

.goodsPage>.side {
  flex: 0 0 80px;
  overflow: auto;
}

.goodsPage>.side>li {
  padding: 12px 12px 0px 12px;
  height: 42px;
  background: #f3f5f7;
  overflow: hidden;
}

a,
a:active,
a:hover {
  text-decoration: none;
}

.goodsPage>.side>li>a {
  display: block;
  height: 41px;
  font-size: 12px;
  white-space: wrap;
  color: #333;
  border-bottom: 1px solid rgba(7, 17, 27, 0.1);
  display: flex;
  align-items: center;
  padding-bottom: 0px;
  background-color: transparent;

}

.goodsPage>.side>li:hover {
  background: white;
}

.goodsPage>.right {
  flex: 1;
  height: 100%;
  overflow: auto;
}

::-webkit-scrollbar {
  display: none;
}

.goodsPage>.right li {
  border-bottom: 1px solid rgb(7, 17, 27, 0.1);
  display: flex;
  padding: 18px;
  position: relative;
}

.goodsPage>.right li>.text {
  margin-left: 10px;
}

.goodsPage>.right li>.text>p:nth-child(1) {
  font-size: 14px;
  color: rgb(7, 17, 27);
  line-height: 14px;
  margin-top: 2px;
}

.goodsPage>.right li>.text>.haoping {
  width: 134px;
}

.goodsPage>.right li>.text>.haoping>span {
  font-size: 10px;
  color: rgb(147, 153, 159);
  line-height: 10px;
  margin-right: 10px;
}

.goodsPage>.right li>.text>.price>.redPrice {
  font-size: 14px;
  color: red;
  font-weight: normal;
  line-height: 24px;
}

.goodsPage>.right li>.text>.price>.odlPrice {
  font-size: 10px;
  color: rgb(147, 153, 159);
  font-weight: normal;
  line-height: 24px;
}

.description {
  font-size: 10px;
  color: rgb(147, 153, 159);
  margin-top: 6px;
  line-height: 14px;
}

.oldPrice {
  font-size: 10px;
  color: rgb(147, 153, 159);
  font-weight: normal;
  line-height: 24px;
  margin-left: 5px;
}

img {
  display: block;
  width: 70px;
  height: 70px;
}

.btns {
  position: absolute;
  right: 18px;
  bottom: 12px;
}

.jian {
  display: inline-block;
  width: 20px;
  height: 20px;
  background: blue;
  text-align: center;
  line-height: 18px;
  border-radius: 50%;
  text-align: center;
  font-size: 20px;
  font-weight: bold;
  color: rgb(0, 160, 220);
  background-color: white;
  border: 2px solid rgb(0, 160, 220);
}

.jia {
  display: inline-block;
  width: 20px;
  height: 20px;
  background: blue;
  text-align: center;
  line-height: 18px;
  border-radius: 50%;
  text-align: center;
  font-size: 20px;
  font-weight: bold;
  color: white;
  background-color: rgb(0, 160, 220);
  border: 2px solid rgb(0, 160, 220);
}

.count {
  margin: 0px 6px;
  color: rgb(147, 153, 159);
}

.goodsBigName {
  height: 26px;
  background: #f3f5f7;
  border-left: 2px solid #d9dde1;
  line-height: 26px;
  font-size: 12px;
  color: rgb(147, 153, 159);
  padding-left: 14px;
}
</style>